<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <script src="../JQuery/jquery-3.2.0.min.js"></script>
    <title>page5</title>
    <style>
        * {
            margin: 0;
            padding: 0
        }

        html, body {
            width: 100%;
            height: 100%;
            overflow: hidden
        }

        .page5 {
            position: absolute;
            width: 100%;
            height: 100%;
            background: rgb(67,205,119);
        }

        .page5_content {
            width: 100%;
            height: 100%;
            position: relative;
            background: url("page5_content_bg.png") no-repeat;
            background-size: cover;
        }

        .page5_img1 {
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 295px;
            background: url(page5_pic1.png) no-repeat;
            background-size: cover;
            opacity: 0;
        }

        /*从底侧滑入*/
        .page5_running_bottom {
            animation: page5_img_bottom 0.7s ease;
            animation-iteration-count: 1;
            animation-direction: normal;
        }

        @keyframes page5_img_bottom {
            from {
                opacity: 0;
                transform: translate(0,295px);
            }
            to {
                opacity: 1;
                transform: translate(0, 0)
            }
        }

        .page5_img2 {
            position: absolute;
            left: 47px;
            top: 60px;
            width: 248px;
            height: 109px;
            background: url(page5_pic2.png) -55px -64px;
            background-size: 360px;
            opacity: 0;
        }

        .page5_img3 {
            position: absolute;
            left: 47px;
            top: 170px;
            width: 225px;
            height: 96px;
            background: url(page5_pic2.png) -52px -182px;
            background-size: 360px;
            opacity: 0;
        }

        /*从右侧滑入*/
        .page5_running_right {
            animation: page5_img_right 0.7s ease;
            animation-iteration-count: 1;
            animation-direction: normal;
        }

        @keyframes page5_img_right {
            from {
                opacity: 0;
                transform: translate(300px,0);
            }
            to {
                opacity: 1;
                transform: translate(0, 0)
            }
        }
    </style>
</head>
<body>
<div class="page5">
    <div class="page5_content">
        <div class="page5_img1"></div>
        <div class="page5_img2"></div>
        <div class="page5_img3"></div>
    </div>
</div>
<script>
    $(document).ready(function () {
        var t;
        t = setTimeout(function () {
            clearTimeout(t);
            $(".page5_img1").addClass("page5_running_bottom").css("opacity",1);
            t = setInterval(img23_move,500)
        },700)

        function img23_move() {
            if($(".page5_img1").css("opacity") / 1 == 1){
                clearInterval(t);
                for (var i = 0; i < 2; i++) {
                    (function ($this, i) {
                        setTimeout(function () {
                            $this.addClass("page5_running_right");
                            $this.css("opacity", 1)
                        }, i * 700)
                    })($(".page5_img1").siblings().eq(i), i);
                }
            }
        }


    })
</script>
</body>
</html>